<template>
  <div class="table-main">
    <el-dialog
      :close-on-click-modal="false"
      @close="handMyClose"
      :append-to-body="true"
      title="商品"
      :visible.sync="dialogVisibleMulti"
      width="60%"
    >
      <div style="margin-top:50px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商品信息录入" name="first">
            <el-form
              ref="form"
              :model="form"
              label-width="120px"
              :rules="rules"
            >
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品类目:" prop="goodTypeId">
                    <el-cascader
                      @change="handData"
                      ref="myCascader"
                      :props="defaultParams"
                      :options="goodClassList"
                      :disabled="isShow == 3"
                      v-model="form.goodTypeId"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品单位:" prop="goodUnit">
                    <el-select
                      filterable
                      :disabled="isShow == 3"
                      v-model="form.goodUnit"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.dataValue"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <el-button
                      type="primary"
                      v-if="isShow != 3"
                      icon="el-icon-plus"
                      @click="handAddGoodUnit"
                      >添加</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品品牌:" prop="brand">
                    <el-select
                      filterable
                      :disabled="isShow == 3"
                      v-model="form.brand"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in brandList"
                        :key="item.id"
                        :label="item.dataValue"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <el-button
                      type="primary"
                      v-if="isShow != 3"
                      icon="el-icon-plus"
                      @click="handAddBrand"
                      >添加</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商家店铺:" prop="shops">
                    <el-select
                      filterable
                      :disabled="isShow == 3"
                      v-model="form.shops"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in findAllsList"
                        :key="item.id"
                        :label="item.shopName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品:" prop="fileList">
                    <el-upload
                      ref="upload"
                      :data="form"
                      :headers="headers"
                      class="avatar-uploader"
                      :action="
                        $store.state.app.newUrl + '/admin/goods/moreGoodFile'
                      "
                      :show-file-list="true"
                      :on-success="handSuccess"
                      :auto-upload="false"
                      :on-change="handlePreview"
                      :file-list="form.fileList"
                    >
                      <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMulti = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handFromSub('form')"
          v-if="isShow != 3"
          :loading="bntLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { imgSizi } from "@/utils/myUtils";
import myTinymce from "@/components/Tinymce";
export default {
  name: "SidebarLogo",
  components: {
    myTinymce
  },
  watch: {
    isState(newObj) {
      this.isShow = newObj;
    }
  },
  props: {
    isState: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loadingUploda2: false,
      bntLoading: false,
      headers: {
        token: localStorage.getItem("mytoken") || ""
        // 'content-type': 'multipart/form-data'
      },
      rules: {
        goodTypeId: [
          {
            required: true,
            message: "请选择商品类目",
            trigger: "change"
          }
        ],
        // brand: [
        //   { required: true, message: '请选择商品品牌', trigger: 'change' }
        // ],
        goodsFlag: [
          { required: true, message: "请选择商品类型", trigger: "change" }
        ],
        shops: [
          { required: true, message: "请选择商家店铺", trigger: "change" }
        ],
        goodUnit: [
          { required: true, message: "请选择商品单位", trigger: "change" }
        ],
        fileList: [{ required: true, message: "请上传商品", trigger: "change" }]
      },
      loadingUploda: false,
      defaultParams: {
        label: "title",
        value: "id",
        children: "children"
      },
      form: { goodTypeId: "", fileList: [] },
      shopStatusOptions: [],
      isShow: 0,
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisibleMulti: false,
      addressKeyword: "",
      activeName: "first",
      dialogVisible: false,
      brandList: [],
      goodClassList: [],
      findAllsList: [],
      loading2: true,
      companyList: []
    };
  },
  async mounted() {
    this.companyList = (await this.$api.getFindCompany()).data.data;
    console.log(this.companyList, "单位");
  },
  methods: {
    handlePreview(file, fileList) {
      console.log(file);
      if (fileList.length != 0)
        this.form.fileList = [fileList[fileList.length - 1]];
    },
    handAddGoodUnit() {
      this.$prompt("请输入单位名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: "请输入单位名称"
      })
        .then(({ value }) => {
          let form = {
            dataValue: value,
            dataType: "Company",
            pid: this.companyList[0].pid || ""
          };
          this.$api
            .addSysDict(form)
            .then(async res => {
              this.form.goodUnit = res.data.data;
              this.companyList = (await this.$api.getFindCompany()).data.data;
              this.$message({
                message: res.data.message,
                type: "success"
              });
            })
            .finally(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    handAddBrand() {
      this.$prompt("请输入品牌名字", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: "请输入品牌名称"
      })
        .then(({ value }) => {
          let form = {
            dataValue: value,
            dataType: "Brand",
            pid: this.brandList[0].pid || ""
          };
          this.$api
            .addSysDict(form)
            .then(async res => {
              this.form.brand = res.data.data;
              this.brandList = (await this.$api.getSysBrand()).data.data;
              this.$message({
                message: res.data.message,
                type: "success"
              });
            })
            .finally(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    handData(val) {
      this.form.goodTypeId = this.form.goodTypeId[
        this.form.goodTypeId.length - 1
      ];
    },
    async handGetList(val, id) {
      this.activeName = "first";
      this.loading2 = false;
      this.brandList = (await this.$api.getSysBrand()).data.data;
      this.findAllsList = (await this.$api.userByShop()).data.data;
      console.log("商家当店铺", this.findAllsList);
      let newData = (await this.$api.getGoodsTypeTreeinfo()).data.data;
      console.log(id, "有吗");
      if (id) {
        this.this.form.shops = id;
      }

      newData.forEach(item => {
        if (item.children.length == 0) {
          item.disabled = true;
        }
      });
      this.goodClassList = this.getTreeData(newData);
      console.log(this.goodClassList, "this.goodClassList");
      if (val == 1) {
      }
    },
    handGetShop(id) {
      this.$forceUpdate();
      this.loading2 = true;
      this.$api.getSysSelectGoodsByIdGoods(id).then(async res => {
        console.log("详情吗", res.data.data);
        res.data.data.shops = parseInt(res.data.data.shops);
        res.data.data.resourcesList.forEach(item => {
          item.url = item.resPath;
        });
        this.$refs.ceshifuwenben.setContent(res.data.data.details);
        this.form = res.data.data;
        this.form.goodTypeId = this.form.goodTypeId + "";
        this.loading2 = false;
      });
    },
    onChange() {
      this.loadingUploda2 = false;
    },
    handSuccess(res, file) {
      console.log(res, "zoulema ");
      this.bntLoading = false;
      this.$parent.init();
      this.$message({
        message: res.message,
        type: "success"
      });
      this.dialogVisibleMulti = false;
    },
    beforeAvatarUpload(file) {},
    handMyClose() {
      // this.$refs.form.resetFields()
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.form.fileList = [];
      this.form.resourcesList = [];
    },
    handFromSub(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.$refs.upload.submit();
        } else {
          console.log("error submit!!");
          this.$message({
            message: "请完成表单录入"
          });
          return false;
        }
      });
    },

    // handSuccess(response, file, fileList) {
    //   console.log(response, file, fileList, '成功回调')
    //   this.form.shopImg = response.message
    // },
    handleClick() {},
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined;
        } else {
          this.getTreeData(data[i].children);
        }
      }

      return data;
    }
  }
};
</script>

<style lang="scss" scoped>
.img_item_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  img {
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 6px;
  }
}
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
